<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抓大鹅游戏</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #87CEEB;
            text-align: center;
        }
        #gameCanvas {
            display: block;
            margin: 20px auto;
            background-color: #E0F7FA;
            border: 3px solid #00796B;
        }
        #score {
            font-size: 24px;
            margin-top: 10px;
            color: #01579B;
        }
        #startButton {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        #startButton:hover {
            background-color: #45a049;
        }
        .game-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>抓大鹅游戏</h1>
        <div id="score">得分: 0</div>
        <canvas id="gameCanvas" width="500" height="400"></canvas>
        <button id="startButton">开始游戏</button>
    </div>

    <script>
        // 游戏变量
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const startButton = document.getElementById('startButton');
        
        let score = 0;
        let gameRunning = false;
        let animationId;
        
        // 玩家角色
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            speed: 5,
            color: '#FF5722'
        };
        
        // 大鹅数组
        let geese = [];
        
        // 大鹅类
        class Goose {
            constructor() {
                this.width = 40;
                this.height = 40;
                this.x = Math.random() * (canvas.width - this.width);
                this.y = -this.height;
                this.speed = 2 + Math.random() * 3;
                this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
                this.caught = false;
            }
            
            update() {
                this.y += this.speed;
                
                // 检查是否被抓住
                if (!this.caught &&
                    player.x < this.x + this.width &&
                    player.x + player.width > this.x &&
                    player.y < this.y + this.height &&
                    player.y + player.height > this.y) {
                    this.caught = true;
                    score++;
                    scoreElement.textContent = `得分: ${score}`;
                    
                    // 播放音效
                    playCatchSound();
                }
            }
            
            draw() {
                if (!this.caught) {
                    // 绘制大鹅身体
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.ellipse(this.x + this.width/2, this.y + this.height/2, 
                                this.width/2, this.height/2, 0, 0, Math.PI * 2);
                    ctx.fill();
                    
                    // 绘制大鹅头
                    ctx.beginPath();
                    ctx.arc(this.x + this.width/2, this.y + this.height/4, 
                            this.width/4, 0, Math.PI * 2);
                    ctx.fillStyle = 'white';
                    ctx.fill();
                    
                    // 绘制大鹅眼睛
                    ctx.beginPath();
                    ctx.arc(this.x + this.width/2 + 5, this.y + this.height/4 - 2, 
                            3, 0, Math.PI * 2);
                    ctx.fillStyle = 'black';
                    ctx.fill();
                    
                    // 绘制大鹅嘴
                    ctx.beginPath();
                    ctx.moveTo(this.x + this.width/2 + 10, this.y + this.height/4 + 2);
                    ctx.lineTo(this.x + this.width/2 + 20, this.y + this.height/4 + 5);
                    ctx.lineTo(this.x + this.width/2 + 10, this.y + this.height/4 + 8);
                    ctx.fillStyle = 'orange';
                    ctx.fill();
                }
            }
            
            isOutOfScreen() {
                return this.y > canvas.height || this.caught;
            }
        }
        
        // 键盘控制
        const keys = {
            ArrowLeft: false,
            ArrowRight: false
        };
        
        window.addEventListener('keydown', (e) => {
            if (e.key in keys) {
                keys[e.key] = true;
            }
        });
        
        window.addEventListener('keyup', (e) => {
            if (e.key in keys) {
                keys[e.key] = false;
            }
        });
        
        // 触摸控制（移动设备）
        canvas.addEventListener('touchstart', handleTouch);
        canvas.addEventListener('touchmove', handleTouch);
        
        function handleTouch(e) {
            e.preventDefault();
            const touchX = e.touches[0].clientX - canvas.offsetLeft;
            
            if (touchX < canvas.width / 2) {
                keys.ArrowLeft = true;
                keys.ArrowRight = false;
            } else {
                keys.ArrowRight = true;
                keys.ArrowLeft = false;
            }
        }
        
        // 播放捕捉音效
        function playCatchSound() {
            const sounds = [
                'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3',
                'https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3',
                'https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3'
            ];
            
            const sound = new Audio(sounds[Math.floor(Math.random() * sounds.length)]);
            sound.volume = 0.3;
            sound.play().catch(e => console.log('无法播放音效:', e));
        }
        
        // 游戏主循环
        function gameLoop() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 更新玩家位置
            if (keys.ArrowLeft && player.x > 0) {
                player.x -= player.speed;
            }
            if (keys.ArrowRight && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }
            
            // 绘制玩家
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
            
            // 添加新的大鹅
            if (Math.random() < 0.02) {
                geese.push(new Goose());
            }
            
            // 更新和绘制大鹅
            for (let i = geese.length - 1; i >= 0; i--) {
                geese[i].update();
                geese[i].draw();
                
                // 移除超出屏幕或被抓到的大鹅
                if (geese[i].isOutOfScreen()) {
                    geese.splice(i, 1);
                }
            }
            
            // 继续游戏循环
            if (gameRunning) {
                animationId = requestAnimationFrame(gameLoop);
            }
        }
        
        // 开始游戏
        function startGame() {
            if (!gameRunning) {
                score = 0;
                scoreElement.textContent = `得分: ${score}`;
                geese = [];
                gameRunning = true;
                startButton.textContent = '游戏中...';
                gameLoop();
            }
        }
        
        // 结束游戏
        function endGame() {
            gameRunning = false;
            cancelAnimationFrame(animationId);
            startButton.textContent = '重新开始';
        }
        
        // 事件监听
        startButton.addEventListener('click', () => {
            if (gameRunning) {
                endGame();
            } else {
                startGame();
            }
        });
        
        // 初始化游戏
        function init() {
            // 绘制初始画面
            ctx.fillStyle = '#E0F7FA';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#00796B';
            ctx.font = '24px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('点击"开始游戏"按钮开始', canvas.width/2, canvas.height/2);
        }
        
        init();
    </script>
</body>
</html>